<template>
    <el-card shadow='never'>
        <div slot="header">
            添加用户
            <el-button type="primary" circle class="add" size='mini' @click="back">返回</el-button>
        </div>
        <el-form :model="addForm" status-icon label-position="right" :rules="rules" ref="addForm">
            <el-form-item label="用户名" label-width="70px" prop="username" label-color="rgb(60, 141, 188)">
                <el-input v-model="addForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="70px" prop="password">
                <el-input v-model="addForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" label-width="70px" prop="phone">
                <el-input v-model="addForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="70px" prop="email">
                <el-input v-model="addForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" label-width="70px" prop="gender">
                <el-select v-model="addForm.gender">
                    <el-option label="女" value="f"></el-option>
                    <el-option label="男" value="m"></el-option>
                </el-select>
            </el-form-item>
            <el-button @click="back" size="small">取 消</el-button>
            <el-button type="primary" @click="add('addForm')" size="small">添 加</el-button>
        </el-form>
    </el-card>
</template>

<script>
export default {
    data() {
        let checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('电话不能为空'));
            }
            setTimeout(() => {
                if (!/^1\d{10}$/.test(value)) {
                    callback(new Error('请输入11位格式正确的电话号码'));
                } else {
                    callback();
                }
            }, 500);
        };
        let checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('邮箱不能为空'));
            }
            setTimeout(() => {
                if (!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value)) {
                    callback(new Error('请输入格式正确的邮箱'));
                } else {
                    callback();
                }
            }, 500);
        };
        let checkPwd = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('密码不能为空'));
            }
            setTimeout(() => {
                if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{8,16}$/.test(value)) {
                    callback(new Error('密码由大写字母+小写字母+数字，8-16位组成！'));
                } else {
                    callback();
                }
            }, 500);
        };
        return {
            addForm: {
                username: '',
                password: '',
                phone: '',
                email: '',
                gender: 'm',
            },
            rules: {
                username: [
                    {required:true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { validator: checkPwd, trigger: 'blur' }
                ],
                email: [
                    { validator: checkEmail, trigger: 'blur' }
                ],
                gender: [
                    { message: '请选择性别', trigger: 'blur' }
                ],
                phone: [
                    { validator: checkPhone, trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
        back() {
            this.$router.push({ name: 'users' })
        },
        add(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.axios.post('/users/add', this.addForm).then(() => {
                        this.$router.push({ name: 'users' })
                    }).catch(() => { })
                } else {
                    this.$message.error('错了哦，请正确填写表单内容');
                }
            });

        }
    }
}
</script>

<style  lang="less">
.el-select {
    display: block;
}

.el-form-item__label {
    color: rgb(60, 141, 188);
}
</style>
